<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/back/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/back/css/login.css">
</head>
<body>
<div class="login">
    <div>
        <div class="content">
            <div class="text">用户名:</div>
            <div class="input"><input type="text" id="username" placeholder="请输入用户名" value="admin"/></div>
        </div>
        <div class="content">
            <div class="text">密  码:</div>
            <div class="input"><input type="password" id="password" placeholder="请输入密码" value="123" /></div>
        </div>
        <div class="content">
            <div class="text">验证码:</div>
            <div class="code"><input type="text" id="code" placeholder="请输入验证码" /></div><span><img src="/getCode" id="imgcode" onclick="flushCode()"/></span>
        </div>
        <div><span id="te"></span></div>
        <div class="content">
            <div class="button"><input type="button" value="登录" onclick="login()"/></div>
            <div class="button"><input type="button" value="注册" onclick="window.location.href='/regester.html'"></div>
        </div>
    </div>
</div>
</body>
<script>

    //登录====================================================
    function login() {
        let data = {
            username:$("#username") .val(),
            code:$("#code") .val(),
            password:$("#password").val()
        };
        $.ajax({
            url:'/login',
            data:data,
            type:'post',
            dataType:'json',
            success:function (data) {
                if (data.result ==-1){
                    $("#te").html("你输入的账户不存在");
                    $("#te").css("color","red");
                }else if (data.result == 2){
                    $("#te").html("你输入的密码错误");
                    $("#te").css("color","red");
                }else if (data.result == 1){
                    window.location.href='/back/html/main.html';
                }else if (data.result == 3){
                    $("#te").html("验证码错误");
                    $("#te").css("color","red");
                    flushCode();
                }

            }
        })
    };
    //刷新 验证码~~~~=======================================================
    function flushCode() {
        document.getElementById("imgcode").src="/getCode?date="+new Date();
        // $("#imgcode").attr(src,"/getCode?date="+new Date());
    };


</script>
</html>